<template>
	<view>
		<popup ref="yajinPopInnerRef" :isStopMaskHide="false">
			<view class="yajin-panel flex-col">
				<view class="title">
					押金扣款操作
				</view>
				<view class="select-wrap align-center justify-between" @click="tapKouyaType">
					<view class="v" :class="{placeholder:!typeObj.id}">
						{{!typeObj.id ? '选择扣款类型' : typeObj.name }}
					</view>
					<image src="/static/arrow-br.png" mode="aspectFill" class="ic"></image>
				</view>
				<view class="align-center inpt-wrap">
					<view class="unit">
						￥
					</view>
					<input type="digit" placeholder="扣款金额" class="inpt" v-model="money">
				</view>
				<view class="upload-wrap">
					<view class="k">
						上传证据
					</view>
					<upload-images ref="uploadRef" :count="3" :length="3" itemw="124rpx" itemh="124rpx"  />
				</view>
				<textarea  maxlength="300"  placeholder="请输入备注信息" class="txtarea" v-model="remark" />
				<view class="yajin-btn-wrap align-center justify-center">
					<view class="btn" @click="hidePop">
						取消
					</view>
					<view class="btn full" @click="confirm">确定</view>
				</view>
			</view>
		</popup>
		<kxChoose ref="yajinChooseRef"  @rundata="getYajinTypeChoose" />
	</view>

</template>

<script lang="ts">
import {
	defineComponent,
	// watchEffect,
	reactive,
	toRefs,
	// computed,
	// watch,
	// nextTick,
	ref,
	onMounted,
} from 'vue';	
import kxChoose from '@/components/kx-choose.vue';
import uploadImages from './upload-images-grid.vue';
export default defineComponent({
	components:{
		uploadImages,
		kxChoose,
	},
	setup(props: any, ctx: any) {
		const data: any = reactive({
			kouyaTypes:[], //押金扣款类型
			
			money:'',
			remark:'',
			typeObj:{},
			// images:'',
			
		});
		onMounted(()=>{
			getKouyaType();
		})
		const yajinPopInnerRef = ref();
		const yajinChooseRef = ref();
		const uploadRef = ref();
		const getKouyaType = async ()=>{
			let res = await uni.$request('order.kouya_type');
			data.kouyaTypes = res.data;
		}
		const tapKouyaType = ()=>{
		   if( data.kouyaTypes && data.kouyaTypes.length>0){
			   const arr = data.kouyaTypes.map(s=>({
				   id: s.key,
				   name: s.name
			   }))
			   yajinChooseRef.value.open(arr);
		   }else{
			   uni.$tools.msg('网络繁忙，请稍后再试~')
			   getKouyaType();
		   }
		}
		const getYajinTypeChoose = ({item})=>{
			// console.log("===",item);
			data.typeObj = item;
		}
		const showPop = ()=>{
			data.money='';
			data.remark='';
			data.typeObj={};
			uploadRef.value.setImgs([])
		    yajinPopInnerRef.value.show();
		}
		const hidePop = ()=>{
		   yajinPopInnerRef.value.hide();
		}
		const confirm = ()=>{
		   if(!data.typeObj.id){
			   uni.$tools.msg('请选择扣款类型')
			   return;
		   }
		   if(!data.money){
			   uni.$tools.msg('请输入扣款金额')
			   return;
		   }
		   const arr = uploadRef.value.getImgs();
		   if(!arr || arr.length === 0){
			   uni.$tools.msg('请上传证据')
			   return;
		   }
		   hidePop();
		   const images = arr.join(',');
		   const sendData = {
			   images,
			   money: data.money,
			   remark: data.remark,
			   type: data.typeObj.id,
		   }
		   ctx.emit('confirm',sendData)
		}
		return {
			...toRefs(data),
			yajinChooseRef,
			tapKouyaType,
			getYajinTypeChoose,
			yajinPopInnerRef,
			showPop,
			hidePop,
			
			uploadRef,
			confirm,
		};
		
	}
})
</script>

<style lang="scss" scoped>
.yajin-panel{
	width: 590rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 0 34rpx;
	.title{
		height: 114rpx;
		line-height: 114rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.select-wrap{
		width: 100%;
		height: 74rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		padding: 0 20rpx;
		.v{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.ic{
			width: 24rpx;
			height: 24rpx;
		}
	}
	.inpt-wrap{
		margin-top: 24rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		width: 100%;
		padding: 0 20rpx;
		.unit{
			height: 74rpx;
			line-height: 74rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.inpt{
			width: 100%;
			height: 74rpx;
			line-height: 74rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		
	}
	.upload-wrap{
		margin-top: 24rpx;
		.k{
			font-size: 28rpx;
			color:#333;
		}
	}
	.txtarea{
		margin-top: 20rpx;
		width: 100%;
		height: 121rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		padding: 20rpx;
		line-height: 32rpx;
		color: #333;
		font-size: 28rpx;
	}
	.yajin-btn-wrap{
		height: 130rpx;
		.btn{
			width: 160rpx;
			height: 60rpx;
			border-radius: 30px;
			line-height: 60rpx;
			text-align: center;
			background: #E0E0E0;
			color:#fff;
			margin-right: 72rpx;
			&.full{
				background: #256AE5;
				margin-right: 0;
			}
		}
	}
	
}
</style>
